class Glass {
    // 获取对象
    constructor(id) {
        this.root = document.querySelector(id)
        this.mask = this.root.querySelector('.mask') //遮罩层mask
        this.showBox = this.root.querySelector('.showBox') //显示图片showBox
        this.bigGlass = this.root.querySelector('.bigGlass') //放大镜bigGlass
        this.bigGlassImg = this.root.querySelector('.bigGlassImg') //背景图bigpicBox
        this.ulLiEle = this.root.querySelectorAll('li')
        this.showImg = this.root.querySelector('.showImg')
    }


    // 点击时移除元素身上所有样式
    removeStyle() {
        for (let i = 0; i < this.ulLiEle.length; i++) {
            this.ulLiEle[i].classList.remove('active')
        }
    }
    // 切换图片
    changePic() {
        for (let i = 0; i < this.ulLiEle.length; i++) {
            let _this = this
            this.ulLiEle[i].onclick = function () {
                _this.removeStyle()
                this.classList.add('active')
                _this.showImg.src = `images/show_${i+1}.jpg`
                _this.bigGlassImg.src = `images/show_${i+1}.jpg`
            }
        }
    }
    /**
     *
     * 计算背景图比例
     *   遮罩层mask            放大镜bigGlass
     *  ---------------   =   ------------------
     *   显示图片showbox        背景图bigPicBox
     *
     *   背景图片bigpicbox = 放大镜bigGlass*显示图片showbox/遮罩层mask
     */
    // 设置放大图片的大小
    setScale() {
        this.bigGlassImg.style.width = this.bigGlass.offsetWidth * this.showBox.offsetWidth / this.mask.offsetWidth + 'px'
        this.bigGlassImg.style.height = this.bigGlass.offsetHeight * this.showBox.offsetHeight / this.mask.offsetHeight + 'px'
    }
    // 移动遮罩层显示功能
    moveGlass() {
        this.showBox.onmousemove = (e) => {
            e = e || window.event
            let x = e.offsetX - this.mask.offsetWidth / 2
            let y = e.offsetY - this.mask.offsetHeight / 2
            // 边界判断
            if (x < 0) {
                x = 0
            }
            if (y < 0) {
                y = 0
            }
            if (x > this.showBox.offsetWidth - this.mask.offsetWidth) {
                x = this.showBox.offsetWidth - this.mask.offsetWidth
            }
            if (y > this.showBox.offsetHeight - this.mask.offsetHeight) {
                y = this.showBox.offsetHeight - this.mask.offsetHeight
            }
            this.mask.style.left = x + 'px'
            this.mask.style.top = y + 'px'

            // 放大图片的移动位置
            /**
                 遮罩层移动距离        遮罩层
                ------------   =  ------------
                背景图片移动距离      放大镜

                背景图片移动距离 =  遮罩层移动距离*放大镜/遮罩层
            **/
            let bigX = x * this.bigGlass.offsetWidth / this.mask.offsetWidth
            let bigY = y * this.bigGlass.offsetHeight / this.mask.offsetHeight
            this.bigGlassImg.style.left = -bigX + 'px'
            this.bigGlassImg.style.top = -bigY + 'px'
        }

        this.showBox.onmouseover = () => {
            this.mask.style.display = 'block'
            this.bigGlass.style.display = 'block'
            this.setScale()

        }
        this.showBox.onmouseout = () => {
            this.mask.style.display = 'none'
            this.bigGlass.style.display = 'none'
        }
    }
}